<template>
<div>
  <div class="examDetails" v-if="$store.state.studentInfomation">
    <!-- currentPage: 1, // 当前页码
      pageSize: 5, // 每页的数据条数 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      height="500"
      border
      style="width: 100%"
    >
      <el-table-column prop="e_name" label="考试名称"> </el-table-column>
      <el-table-column prop="score" label="成绩"> </el-table-column>

      <el-table-column prop="time" label="提交时间"> 
        <template slot-scope="scope">
         {{moment(scope.row.time).format('YYYY年MM月DD日 HH:mm')}}
        </template>
      </el-table-column>

      <el-table-column prop="spendtime" label="花费时间"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.$index, scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="block" style="margin-top: 15px">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
  <div v-else>请前往个人中心完善信息<router-link to="/studentHome/homepage">点击前往</router-link></div>
  </div>
</template>

<script>
import axios from "axios";
import { Message } from "element-ui";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
    };
  },
  methods: {
    //当选择每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1; //从第一页开始显示
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //查看详情
    handleEdit(index, row) {
      // console.log(row.eid);
      this.$router.push(`/studentHome/lookExamDetails/${row.eid}`);
    },

    //获取学生考试信息
    getStudentExamInfomation() {
      axios
        .get("/v1/students/studentexaminfo")
        .then((res) => {
          if (res.data.status == 200) {
            // console.log(res.data.data);
            this.tableData = res.data.data;
          }else if(this.$store.state.studentInfomation){
            Message.error({
            showClose: true,
            message: "你还没有考试数据，请参加考试",
            type: "error",
          });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getStudentExamInfomation();
  },
};
</script>
<style lang="scss">
.examDetails {
  margin: 0 auto;
  margin-top: 50px;
}
</style>